<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return txt="意见反馈" style="background: #eeeeee"></Return>
    <div class="title">
      <span>问题和意见</span>
      <span>0/200</span>
    </div>
    <textarea
      class="textrart"
      name=""
      id=""
      cols="30"
      rows="10"
      placeholder="请填写10个字以上的问题描述一遍我们提供更好的帮助"
    ></textarea>
    <div class="title">
      <span>图片(选填，提供问题截图</span>
      <span>0/4</span>
    </div>
    <div class="pic" @click="fileClick">
      <div class="add">+</div>
    </div>
    <div class="title">
      <span>联系电话</span>
    </div>
    <input
      class="input"
      v-model="phone"
      type="text"
      name=""
      id=""
      placeholder="选填，便于我们与你联系"
    />
    <div class="msg">
      验证码<span style="color: red; margin-left: 5px">*</span>
    </div>
    <div class="lst">
      <input type="text" class="lstInpt" />
      <div class="lstcard">FBdi</div>
      <span>换一个</span>
    </div>
    <div class="button">
      <van-button color="#4AC7D7" size="large" @click="submit">提交</van-button>
    </div>
    <input id="upload_file" type="file" style="display: none;" accept='image/*' name="file"  @change="fileChange($event)"/>
  </div>
</template>
<script>
import Return from "../../../components/return";
import { Toast } from "vant";
import $ from 'jquery';
export default {
  components: {
    Return,
  },
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      phone: "",
    };
  },
  methods: {
    submit() {
      if (this.phone != "") {
        if (
          !/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(
            this.phone
          )
        ) {
          Toast.fail("手机号格式不对");
        }
      }
    },
        fileClick() {
          $('#upload_file').click();
 
        },
          fileChange(el) {
          this.files=$("#upload_file").get(0).files;
          console.log(this.files.length);
          for(let i=0;i<this.files.length;i++){
            this.datas.append("file",this.files[i]);
          }
          this.show1=false;
          console.log(typeof this.files);
          console.log(this.files);
          if (!el.target.files[0].size) return;
          this.fileList(el.target);
          el.target.value = ''
        },
  },
};
</script>
<style scoped>
.all {
  background: #eeeeee;
}
.title {
  width: 94%;
  height: 30px;
  line-height: 30px;
  padding: 0 3%;
  font-size: 14px;
  color: #959595;
  display: flex;
  justify-content: space-between;
}
.textrart {
  width: 94%;
  height: 50px;
  padding: 20px 3%;
  background: #fff;
  border: none;
}
.input {
  width: 94%;
  height: 10px;
  padding: 20px 3%;
  background: #fff;
  border: none;
}
.pic {
  width: 100%;
  height: 140px;
  background: #fff;
  display: flex;
  align-items: center;
}
.add {
  width: 100px;
  height: 100px;
  margin-left: 3%;
  text-align: center;
  background: #eee;
  font-weight: bold;
  font-size: 50px;
  line-height: 100px;
  color: #fff;
}
.msg {
  margin: 20px 3%;
}
.lst {
  margin: 0px 3%;
  display: flex;
  align-items: center;
}
.lstInpt {
  width: 100px;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  border: none;
}
.lstcard {
  font-size: 22px;
  font-weight: bold;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px dashed #797979;
  margin-left: 30px;
}
.lst span {
  margin-left: 30px;
  color: #797979;
}
.button {
  width: 60%;
  margin-left: 20%;
  margin-top: 50px;
}
</style>